iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

JavaScript 從零開始系列 第 19

JavaScript 從零開始 - Day19 - 控制判斷(if、else if、switch)

  • 分享至 

  • xImage
  •  

JavaScript Note

if

光看英文單字,if 有如果的意思,在這邊程式碼也是直接使用字面上的感覺。
if 的程式碼如下:

var name = value;

if (name == value) { //判斷式
  ...//陳述式
}

判斷式先判斷小括號內的條件是否符合變數給的值,若相同就會執行陳述式,若不同則不會執行,所以 if 的感覺很直覺,想什麼講什麼就是了。

if 後面的小括號要放比較運算子,也就是 name == value,不能放 name = value,這樣會變成變數值


else if、else

是延續 if 的屬性,倘若 if 內陳述式的程式碼與判斷式不相符,就會直接執行 else if 的陳述式,結尾要用 else

var name = value;

if (condition) { //判斷式
  ... //陳述式
}else if{
  ... //倘若第一個陳述式沒有滿足條件,就會執行 else 裡面的程式碼
  ...
  ...
  ... // else if 可以很多程式碼
}else{
  ...//最後結尾會執行 else 的程式碼
};

else 不用滿足條件,可以直接顯示結果,是滿好用的語法


Switch

Switch 的用法跟 ifelse if 有點像,差別是 if 會把所有的程式碼都讀取過,相對渲染會比較慢,效能相對較低,而 Switch 會全部都讀過,但會只先看條件,看到有相符的型別才會再進去讀取相關內容,讀取後執行其他程式碼就不會再存取了,相對效能較高。

switch 的程式碼如下:

switch (key) { //設定一個表達式,且包含條件
  case value: //要先寫一個 case 然後加上**變數名稱**(字串要加引號,不用小括弧),給一個冒號:寫裡面的內容,結尾用分號 ; ,結束有點像 CSS
    ...
    break; //每個 case 都要用一個 break 做結束。

  default: //defalt 用法有點像 else,就如果沒有滿足的條件就會執行這個內容,但其位置可以任意放置,但我會習慣放在最後面,這樣寫程式碼比較有邏輯一點
    ...
    break; // 結束也要用一個 break 當作結束。
}

建立 switch:設立一個表達式,且包含條件,用小括號包起來。
case: 後方會開始比對,如果符合就會執行相關連的程式碼。
break: 每個 case 後方都會補上一個 break,如果讀取到條件相符,就會停止讀取後方的程式碼。


加入 function 到 Switch

  1. 建立變數。
  2. 建立 function。
  3. 帶入 switch,switch 裡面可以帶入多個相同條件的 case。
var name = value;

function name(params) {
  console.log(params);
}

switch (key) {
  case value: //case1
    ...
    break;

  case value: //case2
    name(params); //帶入 function
    break;

  default:
    ...
    break;
}

實際遇到的jQuery 筆記 - 使用 select 選取 option 的資料,並同步渲染於網頁


上一篇
JavaScript 從零開始 - Day18 - 運算子
下一篇
JavaScript 從零開始 - Day20 - 認識 for 迴圈
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言